<%@page import="com.dfhc.quota.IQuotaConstants"%>

<%@page import="org.quickbundle.tools.helper.RmJspHelper" %>
<%@page import="org.quickbundle.project.RmGlobalReference" %>
<%@page import="com.dfhc.ISystemConstant" %>
<%@ page contentType="text/html; charset=UTF-8" language="java"%>

<!DOCTYPE html>
<html lang="en">
	<head>
	
	   <!-- 全局js 和css包 -->
	   <%@ include file="/jsp/include/web/jqGrid/global.jsp" %>
		<meta charset="utf-8" />
		<title><bean:message key="qb.web_title"/></title>

		<meta name="description" content="Dynamic tables and grids using jqGrid plugin" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<script src="<%=request.getContextPath()%>/js/jqGrid/json2.js"></script>
<script type="text/javascript">

function guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
}

//增加
function  addProDetail(){
	if(checkNumber("insertForm")){
		var dataObj=getFormData("insertForm");

		dataObj.id=guid();
		
		jqData.push(dataObj);
		jQuery("#grid-table").jqGrid("addRowData",dataObj.id, dataObj, "last");
		clearClose();//关闭层
		$("#insertForm").find("input").each(function(){
			$(this).val("");
		});
	}

}


function getFormData(formid){
	var dataObj=new Object();
	$("#"+formid).find("input").each(function(){
		
		var ketN=$(this).attr("name");
		var ketV=$(this).val();
		
		dataObj[ketN]= ketV;
	});

	return dataObj;
}


function checkNumber(formid){
// 	var productName=$("#"+formid).find("input[name=productName]").val();
// 	if($.trim(productName).length==0){
// 		alert("产品名称为空");
// 		return false;
// 	}
	return true;
}


//关闭
function clearClose(){
	
	$(".ui_inner_tan").hide();
	$(".ui_out_tan").hide();
}

//删除数据
function _delete(){
  
	var selectedId = $("#grid-table").jqGrid("getGridParam", "selarrrow");
   
	if(selectedId.length==0){
		alert("请选择要删除的数据!");
		return  false ;
		
	}else{
		var copyNum=new Array();
		
		for(var i=0;i<selectedId.length;i++){
			
			copyNum.push(selectedId[i]);
		}
		var data={};
		for(var i=0;i<jqData.length;i++){
			
			var id=jqData[i].id;
			if(selectedId==id){
				data=jqData[i];
				break;
			}
		}
		for(var num=0;num<copyNum.length;num++){
		
			for(var i=0;i<jqData.length;i++){
				
				var vo=jqData[i];
				var id=vo.id;
				if(id==copyNum[num]){
					jqData.splice(i,1);
					break ;
				}
				
			}
    		
			$("#grid-table").jqGrid('delRowData', copyNum[num]);
			
		}
		
	}

	clearClose();//隐藏删除的数据
}

//修改
function edit(){
	if(checkNumber("updateForm")){
	
		 var dataObj=getFormData('updateForm');
		 var id=dataObj.id;
		 
		 for(var i=0;i<jqData.length;i++){
			 
			 var proId=jqData[i].id;
			 if(proId==id){
				 
				 jqData.splice(i,1);//删除该条记录
				 break;
				 
				 
			 }
			 
		 }
  		jqData.push(dataObj);
    	 $("#grid-table").jqGrid('setRowData', id, dataObj);
 
        clearClose();//关闭
   		$("#updataForm").find("input").each(function(){
   			$(this).val("");
   		});
         	
	}
}



		     
//查询操作
function  searchShi(){

	jQuery("#grid-table").jqGrid("setGridParam",
	{
	       datatype:"json",
	       postData:$(form).serialize(), //发送数据  
	       page:"1"
	}).trigger("reloadGrid");
	   
	$(".ui_inner_tan").hide();
   	$(".ui_out_tan").hide();	 
}

//保存 提交
function doSaveOrCommit(isSaveOrCommit){
	//表单验证通过
	if(doSaveOrCommitCheckForm()){
		
		$("#save").attr("disabled","disabled");
		$("#commit").attr("disabled","disabled");
		
		if(jqData.length==0){

			alert("请选择至少一条产品信息！");
			return false;
		}
		
		var jqDataStr=JSON.stringify(jqData); ;
		$("#zongForm").find("input[name='jqData']").val(jqDataStr);
	
		 $.ajax({
			    type:'post',//可选get
			    url:"${pageContext.request.contextPath}/",
			    data:$(zongForm).serialize(),
			    dataType:'json',
			    async:false , //false为同步
			    success:function(data,status){
				  if(data.status=="0"){
	    	   	     //将按钮设置为可用
	       			 $("#save").removeAttr("disabled");
	       			 $("#commit").removeAttr("disabled");
					  alert(data.message);
			   	   }else{
			   	     	alert(data.message);
	                    window.location.href="${pageContext.request.contextPath}/";
			   	   }
			   },
			   error:function(xhr,s1,s2){
			    	var message = xhr.responseText;
					eval("var json = "+message);
	    	   	     //将按钮设置为可用
	       			 $("#save").removeAttr("disabled");
	       			 $("#commit").removeAttr("disabled");
					if($.trim(json.error).length==0){
						alert('数据异常,请刷新页面重试');
					}else{
						alert(json.error);
					}
			   }
		});
	}
}

//保存提交验证主表信息
function doSaveOrCommitCheckForm(){
	return true;
}

</script>
</head>
<body>
	
	
 <!--begin  新增 -->
	
  <div class="ui-widget-overlay ui_out_tan" ></div>

  <div class="ui-widget ui-widget-content ui-corner-all ui-jqdialog jqmID1 ui_inner_tan" id="add_form" dir="ltr" tabindex="-1" role="dialog" aria-labelledby="edithdgrid-table" aria-hidden="false" >
  <div class="ui-jqdialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"  style="cursor: move;">
	   <span class="ui-jqdialog-title" style="float: left;">新增</span>
	   <a href="javascript:void(0)" class="cancel ui-jqdialog-titlebar-close ui-corner-all" style="right: 0.3em;">
	    <span class="ui-icon ui-icon-closethick"></span>
	   </a>
   </div>
   <div class="ui-jqdialog-content ui-widget-content" id="editcntgrid-table"><div>
   <div class="modal-body">
   		<form name="insertForm" id="insertForm" class="FormGrid ui_inner_form" >   
        
        </form>
     </div>
     
     <div class="EditTable operate_div" >
       <a href="javascript:void(0)" id="sData" class="fm-button ui-state-default ui-corner-all fm-button-icon-left" onclick="javascript:addProDetail()">
       <i class="icon-ok"></i>
               保存</a>
       <a href="javascript:void(0)" id="cData" class="cancel fm-button ui-state-default ui-corner-all fm-button-icon-left">
      <i class="icon-remove"></i> 
              取消</a>
     </div>
   
     </div></div><div class="jqResize ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div></div>
	
	<!-- end 新增 -->
	
	<!-- begin 修改 -->
	
	 <div class="ui-widget ui-widget-content ui-corner-all ui-jqdialog jqmID1 ui_inner_tan" id="portlet-config-edit" dir="ltr" tabindex="-1" role="dialog" aria-labelledby="edithdgrid-table" aria-hidden="false" >
      <div class="ui-jqdialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"  style="cursor: move;">
	   <span class="ui-jqdialog-title" style="float: left;">修改</span>
	   <a href="javascript:void(0)" class="cancel ui-jqdialog-titlebar-close ui-corner-all" style="right: 0.3em;">
	    <span class="ui-icon ui-icon-closethick"></span>
	   </a>
   </div>
   <div class="ui-jqdialog-content ui-widget-content" id="editcntgrid-table"><div>
   <div class="modal-body">
   <form name="updateForm" id="updateForm" class="FormGrid ui_inner_form" >
     
     </form>
     </div>
     
     <div class="EditTable operate_div" >
       <a href="javascript:void(0)" id="sData" class="fm-button ui-state-default ui-corner-all fm-button-icon-left" onclick="javascript:edit()">
       <i class="icon-ok"></i>
            更新</a>
       <a href="javascript:void(0)" id="cData" class="cancel fm-button ui-state-default ui-corner-all fm-button-icon-left">
      <i class="icon-remove"></i> 
              取消</a>
     </div>
   
     </div></div><div class="jqResize ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div></div>
	

    <!-- end  修改 -->	
    <!-- begin 查询 -->
    
     <div class="ui-widget ui-widget-content ui-corner-all ui-jqdialog jqmID1 ui_inner_tan" id="portlet-config-query" dir="ltr" tabindex="-1" role="dialog" aria-labelledby="edithdgrid-table" aria-hidden="false" >
      <div class="ui-jqdialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"  style="cursor: move;">
	   <span class="ui-jqdialog-title" style="float: left;">查询</span>
	   <a href="javascript:void(0)" class="cancel ui-jqdialog-titlebar-close ui-corner-all" style="right: 0.3em;">
	    <span class="ui-icon ui-icon-closethick"></span>
	   </a>
   </div>
   <div class="ui-jqdialog-content ui-widget-content" id="editcntgrid-table"><div>
   <div class="modal-body">
   <form name="form" id="form" class="FormGrid ui_inner_form" method="post" >
   
           
     
     </form>
     </div>
     
     <div class="EditTable operate_div" >
       <a href="javascript:void(0)" id="sData" class="fm-button ui-state-default ui-corner-all fm-button-icon-left" onclick="javascript:searchShi();">
       <i class="icon-search"></i>
           查询</a>
       <a href="javascript:void(0)" id="cData" class="cancel fm-button ui-state-default ui-corner-all fm-button-icon-left">
      <i class="icon-remove"></i> 
              取消</a>
     </div>
   
     </div></div>
     
     </div>
     
    
    
    <!-- end 查询 -->

    <!-- begin 删除 -->
      <div class="ui-widget ui-widget-content ui-corner-all ui-jqdialog jqmID1 ui_inner_tan" id="portlet-config-delete" dir="ltr" tabindex="-1" role="dialog" aria-labelledby="edithdgrid-table" aria-hidden="false" >
      <div class="ui-jqdialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"  style="cursor: move;">
	   <span class="ui-jqdialog-title" style="float: left;">删除选中的数据</span>
	   <a href="javascript:void(0)" class="cancel ui-jqdialog-titlebar-close ui-corner-all" style="right: 0.3em;">
	    <span class="ui-icon ui-icon-closethick"></span>
	   </a>
   </div>
   <div class="ui-jqdialog-content ui-widget-content" id="editcntgrid-table"><div>
   <div class="modal-body">
   <form name="deleteForm" id="deleteForm" class="FormGrid ui_inner_form"  method="post"  >
   
           <div class="control-group">
				<span>确认删除选中的数据？</span>
			 </div>
     
     </form>
     </div>
     
     <div class="EditTable operate_div" >
       <a href="javascript:void(0)" id="sData" class="fm-button ui-state-default ui-corner-all fm-button-icon-left btn-danger" onclick="javascript:_delete();">
       <i class="icon-trash"></i>
           确认删除</a>
       <a href="javascript:void(0)" id="cData" class="cancel fm-button ui-state-default ui-corner-all fm-button-icon-left">
      <i class="icon-remove"></i> 
              取消</a>
     </div>
   
     </div></div><div class="jqResize ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div></div>
     
    <!-- end 删除 -->
	
			   		<%@ include file="/jsp/include/web/jqGrid/rightTop.jsp"%>

					<div class="page-content">

 					  <!-- begin  详情 -->
		                
		                 <div class="widget-box">
		                 
		                     <div class="widget-header">
		                      
		                      <h5>详情</h5>
		                      <div class="widget-toolbar">
		                      
		         <%--               <a href="javascript:void(0)" title="审核通过">
		                           
		                           <i class="icon-check" ></i>
		                         
		                         </a>
		                         
		                         <a href="javascript:void(0)" title="审核驳回" >
		                           
		                           <i class="icon-ban-circle"></i>
		                         
		                         </a>
		                  --%>         
		                         <a href="javascript:history.go(-1);" title="返回"  target="_parent">
		                         
		                           <i class="icon-share-alt"></i>
		                           
		                         </a>
		                      
		                      </div>
		                         
		                      
		                     </div>
		                     <!-- end  header -->
		          <form name="zongForm" id="zongForm"  method="post"  >
		                     
		                     <!-- 存放jqGrid -->
		                     <input type="hidden" value="" name="jqData" id="jqData"/>
		                     <!-- begin  -->
		                     
		                     <div class="widget-body">
		                     
		                       <div class="widget-main">
		                       
		                         <table  class="table table-striped table-bordered table-hover detail-tab">
		                         
			                         <tbody>
			                             <input type="hidden" class="tab-inp" name="id" value="${id}"/>
			                          <tr>
		                           
			                             <th>账户名称:</th>
			                             <td>王晓文</td>
			                             <th>额度账户余额:</th>
			                             <td>￥100.00</td>
			                             <th>信用度</th>
			                             <td>￥20.00</td>
			                          
			                           </tr>
			                           
			                           <tr>
			                            
			                            <th>冻结额度金额</th>
			                            <td>￥100.2</td>
			                            <th>账户充值金额</th>
			                            <td colspan="3">10.0</td>
			                            
			                           
			                           </tr>
			                          
			                           <tr>
			                           
			                            <th>额度账户调整</th>
			                            <td colspan="3"><input type="text" class="tab-inp"/> </td>
			                             <th>调整时间</th>
			                            <td><input type="text"  class="tab-inp date-picker" readonly  /></td>
			                           
			                            </tr>
			                            
			                            
			                            <tr>
			                            
			                             <th>审核意见</th>
			                             <td colspan="5">
			                              
			                              <div>
			                              
			                                <textarea rows="3" cols="3" class="tab-textarea"></textarea>
			                                
			                              </div>
			                              
			                             
			                             </td>
			                             
			                            
			                            </tr>
			                           


			                      </tbody>
		                 
		                 </table>

							<div class="row" style="height: 300px;">
								<div class="col-xs-12">
									<!-- PAGE CONTENT BEGINS -->
	
									<table id="grid-table"></table>
	
									<div id="grid-pager"></div>
	
									<script type="text/javascript">
										var $path_base = "/";//this will be used in gritter alerts containing images
									</script>
	
									<!-- PAGE CONTENT ENDS -->
								</div><!-- /.col -->
							</div><!-- /.row -->


		            </div>
		                     

		                         <!-- begin 操作按钮 -->
		                         <div class="opt-div">
		                         
		                          <a href="javascript:void(0);" class="save-btn-shi" id="save" onclick="javascript:doSaveOrCommit('save')">保存</a>
		                          <a href="javascript:void(0);" class="sub-btn-shi"  id="commit"   onclick="javascript:doSaveOrCommit('commit')" > 提交</a>
					                         
		                         </div>
		                         <!-- end 操作按钮 -->
		                          

		                     
		                     </div>
		                     
		                     <!-- end  -->
		              </form>   
		                 
		                 </div>
		
		                   
 						<!-- end 详情 -->
 						


					</div><!-- /.page-content -->
				</div><!-- /.main-content -->


			</div><!-- /.main-container-inner -->

		
		</div><!-- /.main-container -->

		<script type="text/javascript">
			//var grid_data = ${grid_data};	
		
			 var jqData=[];
		<%--	 <c:forEach items="${beans}" var="bean"> 
				var dataObj1=new Object();
				dataObj1['id']= '${bean.id}';
				dataObj1['productTypeId']= '${bean.productTypeId}';
				dataObj1['productId']= '${bean.productId}';
				dataObj1['productName']= '${bean.productName}';
				jqData.push(dataObj1);
 		   </c:forEach> --%>
		   
			jQuery(function($) {
			   
				var grid_selector = "#grid-table";
				var pager_selector = "#grid-pager";
				
				jQuery(grid_selector).jqGrid({
					//direction: "rtl",
					data:jqData,
					datatype: "local",
				    mtype: 'POST',  
					height: "100%",
					colNames:[
							    '<%=IQuotaConstants.TABLE_COLUMN_DISPLAY.get("id")%>'
								],
					colModel:[
		                       {name:'id',index:'id'}
							], 
					// shrinkToFit:false,不随列数量改变列宽度
					viewrecords : true,
					rownumbers:true,
					rowNum:15,
					rowList:[15,30],
					pager : pager_selector,
					sortname : 'id',//初始化的时候排序的字段
					sortorder : "desc",//排序方式,可选desc,asc
					altRows: true,
					//toppager: true,
					
					multiselect: true,
					//multikey: "ctrlKey",
			        multiboxonly: true,
			
					loadComplete : function() {
						var table = this;
						setTimeout(function(){
							
							
							updateActionIcons(table);
							updatePagerIcons(table);
							enableTooltips(table);
						}, 0);
					},
			
					editurl: getRootPath()+'/orderproductdetail/update',//nothing is saved
					caption: "明细列表展示",
					autowidth: true
			
				});
				
				//enable search/filter toolbar
				//jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
			
				//navButtons
				jQuery(grid_selector).jqGrid('navGrid',pager_selector,
					{ 	//navbar options
						edit: false,
						editicon : 'icon-pencil blue',
						add: false,
						addicon : 'icon-plus-sign purple',
						del: false,
						delicon : 'icon-trash red',
						search: false,
						searchicon : 'icon-search orange',
						view: false,
						viewicon : 'icon-zoom-in grey',
					
					}
				)
				
				//新增
			   jQuery(grid_selector) .navButtonAdd(pager_selector,
					{ caption:"", buttonicon:"icon-plus-sign purple",
				      onClickButton: addShow, position:"last" }) ;
			
				//修改
				  jQuery(grid_selector) .navButtonAdd(pager_selector,
					{ caption:"", buttonicon:"icon-pencil blue",
				      onClickButton:updateShow, 
				      position:"last" }) ;
				//删除
				  jQuery(grid_selector) .navButtonAdd(pager_selector,
					{ caption:"", buttonicon:"icon-trash red",
				      onClickButton:deleteShow , 
				      position:"last" }) ;
				
				//查询
				  jQuery(grid_selector) .navButtonAdd(pager_selector,
					{ caption:"", buttonicon:"icon-search orange",
				      onClickButton:search_div , 
				      position:"last" }) ;
				
			     //新增弹出
				 function addShow(){
			    	 
			    	 $(".ui_out_tan").show();
			    	 $("#add_form").show();
					 
				 }
			     
			     //  修改弹出
			     function updateShow(){
			    	 
		    		var selectedId = $("#grid-table").jqGrid("getGridParam", "selarrrow");
		    	
		    		if(selectedId.length!=1){
		    			alert('请选择一条数据进行修改');
		    			return false;
		    		}
		    		var data={};
		    		for(var i=0;i<jqData.length;i++){
		    			
		    			var id=jqData[i].id;
		    			if(selectedId==id){
		    				data=jqData[i];
		    				break;
		    			}
		    		}
		    		 
	           
		    		$("#portlet-config-edit").find("input[name=productTypeId]").val(data.productTypeId);
                    $("#portlet-config-edit").find("input[name=productId]").val(data.productId);
                    $("#portlet-config-edit").find("input[name=productName]").val(data.productName);
                    $("#portlet-config-edit").find("input[name=plannedVolume]").val(data.plannedVolume);
                    $("#portlet-config-edit").find("input[name=unitPrice]").val(data.unitPrice);
                    $("#portlet-config-edit").find("input[name=carNum]").val(data.carNum);
                    $("#portlet-config-edit").find("input[name=remarkVolume]").val(data.remarkVolume);
                    $("#portlet-config-edit").find("input[name=remainderCarNum]").val(data.remainderCarNum);
                    $("#portlet-config-edit").find("input[name=allPrice]").val(Number(data.plannedVolume)*Number(data.unitPrice));
                    $("#portlet-config-edit").find("input[name=allPrice2]").val(Number(data.plannedVolume)*Number(data.unitPrice));
                  
			    	 $(".ui_out_tan").show();
                     $("#portlet-config-edit").show();
			    	 
			     }
			     
			     //删除弹出
			     function deleteShow (){
			    	 
			    	 var checkedLen= $(".cbox:checked").length;
				    	if(checkedLen==0){
				    		
				    		alert("请至少选择一条数据！");
				    		return false;
				    	}
				    	$(".ui_out_tan").show();
				        $("#portlet-config-delete").show(); 
				    	
			    	 
			     }
                //查询层
			     
			     function search_div(){
			    	 $(".ui_out_tan").show();
			    	 $("#portlet-config-query").show();
			     }
			     
			     
			 
			     
			     
			     
				//unlike navButtons icons, action icons in rows seem to be hard-coded
				//you can change them like this in here if you want
				function updateActionIcons(table) {
					/**
					var replacement = 
					{
						'ui-icon-pencil' : 'icon-pencil blue',
						'ui-icon-trash' : 'icon-trash red',
						'ui-icon-disk' : 'icon-ok green',
						'ui-icon-cancel' : 'icon-remove red'
					};
					$(table).find('.ui-pg-div span.ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
					*/
				}
				
				//replace icons with FontAwesome icons like above
				function updatePagerIcons(table) {
					var replacement = 
					{
						'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
						'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
						'ui-icon-seek-next' : 'icon-angle-right bigger-140',
						'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
					};
					$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
						var icon = $(this);
						var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
						
						if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
					})
				}
			
				function enableTooltips(table) {
					$('.navtable .ui-pg-button').tooltip({container:'body'});
					$(table).find('.ui-pg-div').tooltip({container:'body'});
				}
			
				//var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');
				

			
			});
		</script>
	</body>
</html>
